/**
 * Created by tanbingqin on 2020/3/31.
 */
import React, { Component, PropTypes } from 'react';
import CompactInput from 'components/compact-input'
import { Input, InputNumber, Select } from 'antd';
import { messages, deepFullCopy, queryCurrencyPrecision, currencyPrecisionCal } from "share/common";
import { connect } from "react-redux";
const Option = Select.Option;
import requestService from 'containers/request/request.service'
import moment from 'moment'

class ExpenseAmount extends Component {
  state = {
    value: null
  };

  componentDidMount() {
    const { value } = this.props;
    this.setValue(this.props.value);
  }

  componentWillReceiveProps(nextProps) {
    if('value' in nextProps) {
      this.setValue(nextProps.value)
    }
  }

  setValue = value => {
    this.setState({value});
  };

  renderValueComponent = () => {
    const { value } = this.state;
    const { disabledAmount } = this.props;
    return <InputNumber
      min={0}
      disabled={disabledAmount}
      precision={queryCurrencyPrecision(value && value.currencyCode)}
      step={1}
      value={value && value.amount}
      placeholder={messages('common.please.input')/*请输入*/}
      onChange={this.handleAmountChange}
    />
  };

  //获取汇率
  getRate = () => {
    const { user, company } = this.props;
    let { value } = this.state;
    let date = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
    requestService.getCurrencyRate(value.currencyCode, date, user.userOID, company.baseCurrency).then(res => {
      value.actualCurrencyRate = Number(res.data.rate).toFixed(7); //汇率
      value.companyCurrencyRate = Number(res.data.rate).toFixed(7); //企业汇率
      value.rateDeviation = 0; //汇率偏移
      this.setState({ value }, this.dispatchOnChange);
    });
  };

  //选择币种
  handleCurrencyChange = (currencyCode) => {
    const { company } = this.props;
    let { value } = this.state;
    value.currencyCode = currencyCode;
    value.amount = currencyPrecisionCal(currencyCode, value.amount);
    if (currencyCode !== company.baseCurrency) {
      this.setState({ value }, this.getRate);
    } else {
      value.actualCurrencyRate = 1; //汇率
      value.companyCurrencyRate = 1; //企业汇率
      value.rateDeviation = 0; //汇率偏移
      this.setState({ value }, this.dispatchOnChange);
    }
  };

  //修改金额
  handleAmountChange = (amount) => {
    let { value } = this.state;
    if (!isNaN(amount) && amount !== null && amount !== undefined && amount !== '') {
      value.amount = amount;
      this.setState({ value }, this.dispatchOnChange);
    }
  };

  dispatchOnChange = () => {
    const { value } = this.state;
    const { onChange } = this.props;
    onChange && onChange(value);
  };

  render() {
    const { disabledCurrency, value, currencyList, language } = this.props;
    return (
      <div>
        <CompactInput className="half-compact">
          <Select
            disabled={disabledCurrency}
            onChange={this.handleCurrencyChange}
            placeholder={messages('common.select')/*请选择*/}
            value={value ? value.currencyCode : undefined}
          >
            {currencyList.map(item => {
              return <Option key={item.currency}>{item.currency}{ language.code === 'zh_cn' ? ` ${item.currencyName}` : ''}</Option>
            })}
          </Select>
          {this.renderValueComponent()}
        </CompactInput>
      </div>
    );
  }

  static propTypes = {
    onChange: PropTypes.func,
    disabledCurrency: PropTypes.bool, //币种不可编辑
    disabledAmount: PropTypes.bool, //金额不可编辑
    currencyList: PropTypes.array, //可选币种列表
  };

  static defaultProps = {
    onChange: () => {},
    disabledCurrency: false,
    disabledAmount: false,
    currencyList: [],
  };
}

function mapStateToProps(state) {
  return {
    language: state.main.language,
    company: state.login.company, //申请人所在公司
    user: state.login.user, //申请人
  }
}

export default connect(mapStateToProps)(ExpenseAmount);
